<template>
	<view class="container">
		<view class="head-box">
			<view class="search">
				<view class="search-icon">
					<view class="search-view">
						<image :src="imgUrl + '/image/icon-search.png'" class="search-img"></image>
						<input v-if="isReach" class="input-search" type="text" maxlength="10" :value="inputValue"
							placeholder="请输入员工姓名及人才号" placeholder-style="color:#333333" :focus="searchFocus"
							@input="searchChange" />
						<input v-show="!isReach" class="input-search" type="text" placeholder="请输入员工姓名及人才号"
							placeholder-style="color:#8E8F97" @focus="isReach = true" />
					</view>
					<uni-icons v-if="isReach" type="closeempty" size="16" color="#8e8f97"
						@click="inputClear"></uni-icons>
				</view>
			</view>
			<view class="tabs">
				<view :class="['tabs-item',curTab===item.value?'tabs-item-active':'']" v-for="(item,index) in tabs"
					:key="index" @tap="changeTab(item.value)">
					{{item.label}}
				</view>
			</view>
		</view>
		<view class="content-box">
			<scroll-view v-if="pageList.length" :scroll-y="true" style="height: 78vh" @scrolltolower="lower"
				:refresher-enabled="false" refresher-background="#f6f6f6" refresher-default-style="black"
				:refresher-triggered="false">
				<notExamine :curTab="curTab" v-for="(item,index) in pageList" :key="index" @clickBtn="clickBtn">
				</notExamine>
				<view class="load-more-box">
					<uni-load-more :status="status" :content-text="contentText" />
				</view>
			</scroll-view>
			<view class="content-empty" v-else>
				<image :src="imgUrl + '/images/empty-inter.png'" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import notExamine from "./components/notExamine.vue";
	export default {
		components: {
			notExamine
		},
		data() {
			return {
				imgUrl: '',
				isReach: false,
				inputValue: '',
				searchFocus: false,
				tabs: [{
					value: 0,
					label: '待审核的'
				}, {
					value: 1,
					label: '已审核的'
				}],
				pageData: {
					pageNum: 1,
					count: 10,
					keyWord: ''
				},
				curTab: 0,
				pageList: [{}, {}],
				// 分页
				status: 'loading',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '正在加载',
					contentnomore: '没有更多了'
				}
			};
		},
		created() {
			// 初始化imgUrl
			if (this.$mConfig && this.$mConfig.imageUrl) {
				this.imgUrl = this.$mConfig.imageUrl;
			}
		},
		watch: {
			isReach(val) {
				this.searchFocus = val;
			}
		},
		onPullDownRefresh() {
			console.log("刷新");
			this.initData();
		},
		methods: {
			// 待审核
			clickBtn(type) {
				console.log(type, "type")
			},
			// 触底了
			lower(e) {
				console.log(e, '触底')
				this.getReachData();
			},
			inputClear(e) {
				this.isReach = false;
				this.inputValue = '';
			},
			searchChange(e) {
				let {
					value
				} = e.detail;
				this.inputValue = value;
			},
			inputClear(e) {
				this.isReach = false;
				this.inputValue = '';
			},
			changeTab(val) {
				this.curTab = val;
			},
			// 刷新
			initData() {
				uni.showLoading({
					title: "加载中……",
				})
				this.status = 'loadmore'
				this.pageData.pageNum = 1
				// tHouseholdListApi(this.pageData).then(res => {
				// 	uni.stopPullDownRefresh()
				// 	uni.hideLoading()
				// 	if (res.code == 200) {
				// 		this.pageList = res.data.list;
				// 		if (this.pageList.length >= res.data.total) {
				// 			this.status = 'nomore';
				// 		}
				// 		this.pageList = this.pageList.map(ele => {
				// 			return {
				// 				...ele
				// 			}
				// 		})
				// 	}
				// }).catch(() => {
				// 	uni.hideLoading()
				// 	uni.stopPullDownRefresh()
				// })
			},
			async getReachData() {
				uni.stopPullDownRefresh()
				if (this.status == 'nomore') return;
				this.status = 'loading';
				this.pageData.pageNum++

				// const res = await tUnitInfoListApi({
				// 	...this.pageData,
				// 	unitName: this.pageData.keyWord
				// })
				// if (res.code == 200) {
				// 	this.pageList = this.pageList.concat(res.data.list);
				// 	if (this.pageList.length >= res.data.total) this.status = 'nomore';
				// 	else this.status = 'loadmore';
				// 	this.pageList = this.pageList.map(ele => {
				// 		return {
				// 			...ele
				// 		}
				// 	})
				// }


			},
		}

	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F3F5FA;
		display: flex;
		height: 100vh;
		flex-direction: column;

		.search {
			padding: 19rpx 30rpx 46rpx 30rpx;
			width: 100%;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #222;
			box-sizing: border-box;

			.search-icon {
				flex: 1;
				background: #F3F5FA;
				border-radius: 16rpx;
				padding: 23rpx 14rpx 23rpx 26rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.search-view {
					display: flex;
					flex-direction: row;
					align-items: center;

					.search-img {
						width: 32rpx;
						height: 32rpx;
						margin-right: 14rpx;
					}

					.input-search {
						font-size: 28rpx;
						color: #333333;
					}
				}
			}

			.r-cancel {
				padding-right: 30rpx;
				padding: 0;
				font-size: 30rpx;
				background: transparent;
				color: #ffffff;
			}
		}

		.tabs {
			background-color: #fff;
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;

			.tabs-item {
				flex: 1;
				font-weight: 500;
				color: #333333;
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
			}

			.tabs-item::after {
				content: "";
				display: block;
				width: 88rpx;
				height: 6rpx;
				background: #fff;
				border-radius: 2rpx;
				margin-top: 19rpx;
			}

			.tabs-item-active {
				font-weight: bold;
				color: #3A92FF;
			}

			.tabs-item-active::after {
				content: "";
				display: block;
				width: 88rpx;
				height: 6rpx;
				border-radius: 2rpx;
				margin-top: 19rpx;
				background: #3A92FF;
			}
		}

		.content-box {
			flex: 1;
			padding: 20rpx 20rpx 0 20rpx;
			overflow-y: auto;
			background-color: transparent;
			position: relative;
		}

		.content-empty {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 294rpx;
				height: 357rpx;
			}
		}
	}
</style>